<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<div style="text-align: center; font-size: 20px" v-if="activities.length == 0">暂无物流信息</div>
		<el-timeline>
			<el-timeline-item
				v-for="(activity, index) in activities"
				:key="index"
				placement="top"
				:type="activity.type"
				:color="!index ? '#409EFF' : ''"
				:timestamp="activity.AcceptTime"
			>
				{{ activity.AcceptStation }}
			</el-timeline-item>
		</el-timeline>
	</el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { orderSelectLogistics } from '/@/api/admin1';

export default {
	name: 'checkLogisticsDialog',
	setup() {
		const state = reactive({
			title: '物流信息',
			open: false,
			activities: [] as any,
		});

		/********** 点击事件(on开头) **********/

		/********** 方法事件 **********/
		//打开
		const openDialog = (config: any) => {
			state.open = true;
			_orderSelectLogistics(config);
		};

		/********** 网络请求 **********/
		// 查看物流
		const _orderSelectLogistics = (_data: object) => {
			orderSelectLogistics(_data).then((res: any) => {
				console.log('查看物流', res);
				state.title = `「${res.data.info.freight_sn}」物流信息`;
				state.activities = res.data.list.Traces.reverse();
			});
		};

		return {
			openDialog,
			...toRefs(state),
		};
	},
};
</script>

<style lang="scss" scoped></style>
